<template>
  <div class="relyComment-wrap">
    <!-- 导航栏-->
    <van-nav-bar :title="`${replyDate[0].reply_count}条回复`">
      <template #left>
        <van-icon name="cross" @click="$emit('closeRely')" />
      </template>
    </van-nav-bar>
    <!-- 头部信息 -->
    <articleItem :list="replyDate" />
    <!-- 所有评论 -->
    <articleList :id="replyDate[0].com_id" type="c" :list = 'list'/>
    <!-- 发表回复 -->
    <van-cell class="Article-footer">
      <div slot="title" @click="isShowReply = true">
        <van-button round style="width: 160px; height: 30px;margin-left:80px;">发布回复</van-button>
      </div>
    </van-cell>
    <!-- 底部区域  写评论 -->
    <van-popup v-model="isShowReply" position="bottom">
      <postComment :target="replyDate[0].com_id" :articleId="id" @postDate='postDate'/>
    </van-popup>
  </div>
</template>
<script>
import articleItem from './article-itme.vue'
import articleList from './article-list.vue'
import postComment from './post-comment.vue'
export default {
  name: 'relyComment',
  components: {
    articleItem,
    articleList,
    postComment
  },
  data () {
    return {
      isShowReply: false, // 评论是否显示
      list: []
    }
  },
  props: {
    replyDate: {
      type: Array,
      required: true
    },
    id: { // 文章id
      type: [Number, Object, String],
      required: true
    }
  },
  methods: {
    postDate (item) {
      this.list.unshift(item)
      this.replyDate[0].reply_count++ // 更新评论总数
      this.isShowReply = false // 关闭写评论
    }
  }
}
</script>
<style scoped lang="less">
.Article-footer {
  position: fixed;
  bottom: 0;
}
</style>
